<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/axios.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<table border="1px" cellspacing="0px" cellpadding="">
				<tr>
					<th colspan="2">
						<button type="button" @click="findAll">点我查询所有用户信息</button>
					</th>
				</tr>
				<tr>
					<th>
						<input type="number" placeholder="请输入ID" v-model="user.id"/>
					</th>
					<th>
						<button type="button" @click="findUserById">点击查询用户</button>
					</th>
				</tr>
				<tr>
					<th>
						姓名：<input type="text" placeholder="请输入姓名" v-model="user.name"/><br />
						年龄：<input type="number" placeholder="请输入年龄" v-model="user.age"/><br />
						性别：<input name="sex" type="radio" value="男" v-model="user.sex"/>男&nbsp;&nbsp;&nbsp;
							<input name="sex" type="radio" value="女" v-model="user.sex"/>女
					</th>
					<th>
						<button type="button" @click="insertUser">点击添加用户</button>
					</th>
				</tr>
				<tr>
					<th></th>
				</tr>
				<tr>
					<th></th>
				</tr>
			</table>
		</div>
		<script type="text/javascript">
			const app = new Vue({
				el:"#app",
				data() {
					return{
						user:{id:"",name:"",age:"",sex:""}
					}
				},
				methods:{
					findAll(){
						axios.get("http://localhost:8090/findAll")
							.then(function(promise){
								console.log(promise.data)
							})
					},
					findUserById(){
						axios.get("http://localhost:8090/findUserById?id=" + this.user.id)
							.then(function(promise){
								console.log(promise.data)
							})
					},
					insertUser(){
						axios.post("http://localhost:8090/insertUser",this.user)
							.then(function(promise){
								console.log(promise)
							})
					}
				}
			})
		</script>
	</body>
</html>
